<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/10
  Time: 16:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>忘记密码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>
    <script src="../static/js/Core_values.js"></script>
    <style>

    </style>

    <style>
        #app{
            width: 400px;
            height: 400px;
            position: relative;
            top: 200px;
            left: 500px;
        }
        #code{
            width: 150px;

        }
    </style>
</head>
<body>
<script src="../static/js/flower.js"></script>
<!--form-stars-here-->

<div id="app" >

    <el-form :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="pass">
            <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="pass">
            <el-input type="text" v-model="ruleForm.userEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.userPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.userPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="age">
            <el-input v-model.number="ruleForm.code" id="code"></el-input>
<%--            <el-button @click="emailCode" style="background-color:blue;color:white;position: relative;top: -40px;left: 205px">点击发送</el-button>--%>
            <el-button :disabled="disabled" @click="emailCode" style="background-color:blue;color:white;position: relative;top: -40px;left: 160px">{{countDown}}秒后重新发送</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateUserPwd" style="position: relative;top: -40px;width: 150px" v-bind:disabled="flag">提交</el-button>
            <a href="../login.jsp"><el-button style="background-color:grey;color:white;position: relative;top: -80px;left: 160px;width: 150px">返回登录</el-button></a>
        </el-form-item>
    </el-form>

</div>
<script>
    new Vue({
        el:"#APP",
        data:{
            disabled: false,   // 按钮是否可用
            countDown: 60 // 倒计时时间（单位：秒）
            ,
            ruleForm:{
                userName:"",
                userPassword:"",
                userPwd:"",
                code:"",
                userEmail:""
            },
            flag:true,

        },
        methods:{
            emailCode(){     //点击发送验证码
                this.disabled = true; // 禁用按钮
                let timer = setInterval(() => {
                    if (this.countDown > 0) {
                        this.countDown--;
                    } else {
                        clearInterval(timer);
                        this.disabled = false; // 启用按钮
                        this.countDown = 60; // 重置倒计时时间
                    }
                }, 1000);
                //ajax发送验证码
                var _this=this
                $.ajax({
                    url:"../user/emailCode",
                    type:"post",
                    data:JSON.stringify(_this.ruleForm),
                    dataType:"json",
                    contentType:"application/json",
                    success:function (res) {
                        console.log(res)
                       if (res.status==200){
                           _this.$message.success(res.message)
                           _this.flag=false
                       }else {
                           _this.$message.error(res.message)
                       }
                    }
                })
            },
            updateUserPwd(){
                var _this=this
                $.ajax({
                    url:"../user/updateUserPwd",
                    type:"post",
                    data:JSON.stringify(_this.ruleForm),
                    dataType:"json",
                    contentType:"application/json",
                    success:function (res) {
                        console.log(res)
                        if (res.status==200){
                            _this.$message.success(res.message)
                            setTimeout(function() {
                                location.href="../login.jsp"
                            }, 1000);

                        }else {
                            _this.$message.error(res.message)
                        }
                    }
                })
            },
        }
    })
</script>

</body>
</html>
